<!--
// Muaz Khan      - www.MuazKhan.com
// MIT License    - www.WebRTC-Experiment.com/licence
// RecordRTC      - github.com/muaz-khan/RecordRTC

// RecordRTC over 
// Socket.io      - https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio
-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>RecordRTC over Socket.io</title>
    <script>
    if (location.href.indexOf('file:') == 0) {
        document.write('<h1 style="color:red;">Please load this HTML file on HTTP or HTTPS.</h1>');
    }
    </script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">

    <script src="/node_modules/recordrtc/RecordRTC.js">
    </script>
    <script src="/socket.io/socket.io.js">
    </script>

    <style>
    html {
        background-color: #f7f7f7;
    }
    
    body {
        background-color: white;
        border: 1px solid rgb(15, 158, 238);
        margin: 1% 35%;
        text-align: center;
    }
    
    hr {
        border: 0;
        border-top: 1px solid rgb(15, 158, 238);
    }
    
    a {
        color: #2844FA;
        text-decoration: none;
    }
    
    a:hover,
    a:focus {
        color: #1B29A4;
    }
    
    a:active {
        color: #000;
    }
    </style>
</head>

<body>
    <h1><a href="https://github.com/muaz-khan/RecordRTC">RecordRTC</a> <a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio">over Socket.io</a>
    </h1>
    <p>
        <video id="camera-preview" style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video>
    </p>

    <div style="display:none;">
        <label id="percentage">Ffmpeg Progress 0%</label>
        <progress id="progress-bar" value="0" max="100"></progress>
        <br />
    </div>

    <div>
        <button id="start-recording" disabled>Start Recording</button>
        <button id="stop-recording" disabled>Stop Recording</button>
    </div>

    <script>
    if (false /* for Microsoft Edge */) {
        var cameraPreview = document.getElementById('camera-preview');
        cameraPreview.parentNode.innerHTML = '<audio id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></audio> ';
    }

    var socketio = io();

    var mediaStream = null;

    socketio.on('connect', function() {
        startRecording.disabled = false;
    });

    var startRecording = document.getElementById('start-recording');
    var stopRecording = document.getElementById('stop-recording');
    var cameraPreview = document.getElementById('camera-preview');

    var progressBar = document.querySelector('#progress-bar');
    var percentage = document.querySelector('#percentage');

    var recordAudio, recordVideo;
    startRecording.onclick = function() {
        startRecording.disabled = true;
        navigator.getUserMedia({
            audio: true,
            video: true
        }, function(stream) {
            mediaStream = stream;

            recordAudio = RecordRTC(stream, {
                type: 'audio',
                recorderType: StereoAudioRecorder,
                onAudioProcessStarted: function() {
                    recordVideo.startRecording();

                    cameraPreview.src = window.URL.createObjectURL(stream);
                    cameraPreview.play();

                    cameraPreview.muted = true;
                    cameraPreview.controls = false;
                }
            });

            var videoOnlyStream = new MediaStream();
            stream.getVideoTracks().forEach(function(track) {
                videoOnlyStream.addTrack(track);
            });

            recordVideo = RecordRTC(videoOnlyStream, {
                type: 'video',
                recorderType: !!navigator.mozGetUserMedia ? MediaStreamRecorder : WhammyRecorder
            });

            recordAudio.startRecording();

            stopRecording.disabled = false;
        }, function(error) {
            alert(JSON.stringify(error));
        });
    };

    stopRecording.onclick = function() {
        startRecording.disabled = false;
        stopRecording.disabled = true;

        // stop audio recorder
        recordAudio.stopRecording(function() {
            // stop video recorder
            recordVideo.stopRecording(function() {

                // get audio data-URL
                recordAudio.getDataURL(function(audioDataURL) {

                    // get video data-URL
                    recordVideo.getDataURL(function(videoDataURL) {
                        var files = {
                            audio: {
                                type: recordAudio.getBlob().type || 'audio/wav',
                                dataURL: audioDataURL
                            },
                            video: {
                                type: recordVideo.getBlob().type || 'video/webm',
                                dataURL: videoDataURL
                            }
                        };

                        socketio.emit('message', files);

                        if (mediaStream) mediaStream.stop();
                    });

                });

                cameraPreview.src = '';
                cameraPreview.poster = 'ajax-loader.gif';
            });

        });

        // if firefox or if you want to record only audio
        // stop audio recorder
        recordAudio.stopRecording(function() {
            // get audio data-URL
            recordAudio.getDataURL(function(audioDataURL) {
                var files = {
                    audio: {
                        type: recordAudio.getBlob().type || 'audio/wav',
                        dataURL: audioDataURL
                    }
                };

                socketio.emit('message', files);
                if (mediaStream) mediaStream.stop();
            });

            cameraPreview.src = '';
            cameraPreview.poster = 'ajax-loader.gif';
        });
    };

    socketio.on('merged', function(fileName) {
        var href = (location.href.split('/').pop().length ? location.href.replace(location.href.split('/').pop(), '') : location.href);

        href = href + '/uploads/' + fileName;

        console.log('got file ' + href);

        cameraPreview.src = href
        cameraPreview.play();
        cameraPreview.muted = false;
        cameraPreview.controls = true;
    });

    socketio.on('ffmpeg-output', function(result) {
        if (parseInt(result) >= 100) {
            progressBar.parentNode.style.display = 'none';
            return;
        }
        progressBar.parentNode.style.display = 'block';
        progressBar.value = result;
        percentage.innerHTML = 'Ffmpeg Progress ' + result + "%";
    });

    socketio.on('ffmpeg-error', function(error) {
        alert(error);
    });
    </script>

</body>

</html>